	var html5rocks = {};
	html5rocks.webdb = {};
	html5rocks.webdb.db = null;
      
	html5rocks.webdb.open = function() {
		var dbSize = 1 * 1024 * 1024; // 5MB
		html5rocks.webdb.db = openDatabase("bookmarkDB", "1.0", "북마크DB", dbSize);
	};
      
	html5rocks.webdb.createTable = function() {
		var db = html5rocks.webdb.db;
		db.transaction(function(tx) {
				tx.executeSql("CREATE TABLE IF NOT EXISTS bookmarkDB(title TEXT, address TEXT, gps TEXT)", []);
		});
	};
      
	html5rocks.webdb.addbookmark = function(title, address, gps) {
		var db = html5rocks.webdb.db;
		db.transaction(function(tx){
			tx.executeSql("INSERT INTO bookmarkDB(title, address, gps) VALUES (?,?,?)",
					[title, address, gps],
					html5rocks.webdb.onSuccess,
					html5rocks.webdb.onError);
		});
	};
      
	$(document).on('click', '.list-btn1:even', function() {
		if ($(this).html() == '북마크') {
			html5rocks.webdb.addbookmark($(this).prev().prev().val(), $(this).prev().val(), $(this).val());
			$('.panel-heading > .panel-title > .list-style > .mark-sign > i', $(this).parent().parent().prev()).removeClass('fa-o-style');
			$('.panel-heading > .panel-title > .list-style > .mark-sign > i', $(this).parent().parent().prev()).addClass('fa-style');
			$(this).html("북마크 끄기");
		} else {
			html5rocks.webdb.deletebookmark($(this).val());
			$('.panel-heading > .panel-title > .list-style > .mark-sign > i', $(this).parent().parent().prev()).addClass('fa-o-style');
			$('.panel-heading > .panel-title > .list-style > .mark-sign > i', $(this).parent().parent().prev()).removeClass('fa-style');
			$(this).html("북마크");
		}
		
		$(this).blur();

		return false;
	});
      
	html5rocks.webdb.onError = function(tx, e) {
		alert("There has been an error: " + e.message);
		};
      
	html5rocks.webdb.onSuccess = function(tx, r) {
		// re-render the data.
		html5rocks.webdb.getAllbookmarkItems(loadbookmarkItems);
	};
      
	html5rocks.webdb.getAllbookmarkItems = function(renderFunc) {
		var db = html5rocks.webdb.db;
		db.transaction(function(tx) {
			tx.executeSql("SELECT * FROM bookmarkDB", [], renderFunc,
					html5rocks.webdb.onError);
		});
	};
      
	html5rocks.webdb.deletebookmark = function(gps) {
		var db = html5rocks.webdb.db;
		db.transaction(function(tx){
			tx.executeSql("DELETE FROM bookmarkDB WHERE gps=?", [gps],
					html5rocks.webdb.onSuccess,
					html5rocks.webdb.onError);
		});
	};
      
	function loadbookmarkItems(tx, rs) {
		for (var i=0; i < rs.rows.length; i++) {
			for (var j=0; j<10 ; j++) {
				if ($('#'+j).val() == rs.rows.item(i).gps) {
					$('#'+j).html('북마크 끄기');
					$('.panel-heading > .panel-title > .list-style > .mark-sign > i', $('#'+j).parent().parent().prev()).removeClass('fa-o-style');
					$('.panel-heading > .panel-title > .list-style > .mark-sign > i', $('#'+j).parent().parent().prev()).addClass('fa-style');
				}
			}
		}
	}
      
	function renderbookmark(row, i) {
		var pull = '';
		
		pull += '<div class=list-case>';
		pull += 	'<div class=content>';
		pull += 		'<div class=panel-heading>';
		pull +=				'<div class=panel-title>';
		pull +=					'<div class="alarm-thumbnail pull-left" id=thumbnail' + i + ' style="display: none;">';
		pull +=						'<input type="checkbox" value="' + row.gps + '" />';
		pull +=					'</div>'
		pull +=					'<a class="accordion-toggle list-style" data-toggle=collapse data-parent=#accordion href=#collapse' + i + '>';
		pull +=						'<div class="list-title"><strong>';
		pull += 						row.title;
		pull += 					'</div>';
		pull += 					'</strong><div class="list-section">';
		pull += 						row.address;
		pull += 					'</div>';
		pull +=					'</a>';
		pull +=				'</div>';
		pull += 		'</div>';
		pull += 	'</div>';
		pull +=		'<div id=collapse' + i + ' class="panel-collapse collapse collapse">';
		pull +=			'<div class=panel-body>';
		pull +=				'<button class="list-btn1 btn btn-warning" onclick="sessionStorage[\'el\']=\''+row.title+'\',sessionStorage[\'eg\']=\''+row.gps+'\' ,history.back();"  >';
		pull += 				'도착지';
		pull +=				'</button>';
		pull +=				'<button class="list-btn2 btn btn-danger" onclick="sessionStorage[\'sl\']=\''+row.title+'\', sessionStorage[\'sg\']=\''+row.gps+'\',history.back();">';
		pull += 				'출발지';
		pull +=				'</button>';			
		pull +=			'</div>';
		pull +=		'</div>';
		pull += '</div>';
			
			
		/*
		pull += '<div class="list-case">';
		pull += '<span class="alarm-thumbnail" style="display: none;">';
		pull += '<input type="checkbox" value="';
		pull += row.gps;
		pull += '" />';
		pull += '</span>';
		pull+='<div class="list-case2" onclick="if ($(\'div:eq(2) > i\', this).hasClass(\'fa-caret-square-o-down\')) {$(this).next().show();$(\'div:eq(2) > i\', this).removeClass(\'fa-caret-square-o-down\');$(\'div:eq(2) > i\', this).addClass(\'fa-caret-square-o-up\');} else if ($(\'div:eq(2) > i\', this).hasClass(\'fa-caret-square-o-up\')){$(this).next().hide();$(\'div:eq(2) > i\', this).addClass(\'fa-caret-square-o-down\');$(\'div:eq(2) > i\', this).removeClass(\'fa-caret-square-o-up\');}">';
		pull += '<div class="list-title">';
		pull += row.title;
		pull += '</div>';
		pull += '<div class="list-section">';
		pull += row.address;
		pull += '</div>';
		pull += '<div class="list-option">';
		pull+='<i class="fa fa-caret-square-o-down"></i>';
		pull += '</div>';
		pull+='</div>';
		pull += '<div class="list-sub" style="display : none;">';
		pull +='<button class="list-btn1 btn btn-primary" onclick="sessionStorage[\'el\']=\''+row.title+'\',sessionStorage[\'eg\']=\''+row.gps+'\' ,history.back();"  >';
		pull+= '도착지';
		pull+='</button>';
		pull+='<button class="list-btn2 btn btn-primary" onclick="sessionStorage[\'sl\']=\''+row.title+'\', sessionStorage[\'sg\']=\''+row.gps+'\',history.back();">';
		pull+= '출발지';
		pull+='</button>';
		pull += '</div>';
		pull += '</div>';
		*/
		return pull;
	}

		
	
	function delList(tx, rs) {
		$('.popup-el').click(function() {
			for (var i=0; i < rs.rows.length; i++) {
				if ($('input[type="checkbox"]:eq('+ i +')').is(":checked")){
					html5rocks.webdb.deletebookmark(rs.rows.item(i).gps);
					html5rocks.webdb.getAllbookmarkItems(loadbookmarkList);
				}
			}
			$(this).parents('.bm-popup-box').dialog("close");
		});
	}
      
	function loadbookmarkList(tx, rs) {
		var rowOutput = "";
		for (var i=0; i < rs.rows.length; i++) {
			rowOutput += renderbookmark(rs.rows.item(i), i);
		}
		$('#bookmark').html(rowOutput);
	}
      
	function init() {
		html5rocks.webdb.open();
		html5rocks.webdb.createTable();
		html5rocks.webdb.getAllbookmarkItems(loadbookmarkItems);
		html5rocks.webdb.getAllbookmarkItems(loadbookmarkList);
		html5rocks.webdb.getAllbookmarkItems(delList);
	}

